<template>
  <div>
    <div class="upload_container">
      <h3>单一文件上传「进度管控」</h3>

      <div class="upload_box">
        <input
          ref="progress"
          @change="getFile"
          type="file"
          class="upload_ipu"
        />
        <div class="upload_button_group">
          <button class="upload_button" :class="uploadProgress == 100 ? 'loading' : ''" @click="selectFile">
            上传文件
          </button>
        </div>
        <div class="progress" v-if="progressStatus">
          <div class="progress_select" :style="{ width: uploadProgress + '%' }"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { uploadSingle } from '../../api/upload'
export default {
  data() {
    return {
        files: '',
        progressStatus: false,
        uploadProgress: 0,
    };
  },
  mounted() {},
  methods: {
    selectFile() {
      this.$refs["progress"].click();
    },
    async getFile(event) {
        this.files = event.target.files["0"];

        if(this.files.size > 900 * 1024 * 1024){
            this.$message.warning("上传的文件不能大于900MB");
            return;
        }


        const type = this.files.type;
        if(!/(video|PNG|JPG|JPEG|GIF)/i.test(type)){
            this.$message.warning("上传的文件类型不正确");
            return;
        }


        this.progressStatus = true;
        let fromData = new FormData();
        fromData.append("file", this.files);
        fromData.append("filename", this.files.name);
        const res = await uploadSingle(fromData, (loaded, total) => {
            this.uploadProgress = (loaded / total) * 100;
        })
        // console.log(res);
        if(res.data.code == 0){
            this.$message.success("文件上传成功")
            this.$message.success({
                message: '文件地址: ' + res.data.servicePath,
                offset: 60,
            })
            this.files = "";
            this.uploadProgress = 0;
            this.progressStatus = false;
        }
    },
  },
};
</script>

<style scoped lang='scss'>
.upload_container {
  padding: 40px;
}
.upload_container h3 {
  font-size: 18px;
  font-weight: 700;
}
.upload_box {
  border: 1px dashed #ddd;
  padding: 20px;
  width: 340px;
  min-height: 120px;
}
.upload_button {
  border: none;
  background: antiquewhite;
  color: #fff;
  font-size: 12px;
  text-align: center;
  padding: 0 10px;
  height: 24px;
  line-height: 24px;
  margin-right: 10px;
  cursor: pointer;
  border-radius: 5px;
  background-color: lightcoral;
  position: relative;
}
.upload_ipu {
  display: none;
}
.progress {
  height: 6px;
  background-color: #ccc;
  margin: 10px 0;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.progress_select {
  width: 0;
  height: 100%;
  transition: width 0.1s;
  background-color: lightgreen;
  border-radius: 3px;
  position: absolute;
  overflow: hidden;
}
.loading:after {
  position: absolute;
  content: "loading...";
  border-radius: 5px;
  padding: 0 0 0 15px;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #ddd url("../../assets/css/loading.gif") no-repeat 5px center;
  z-index: 999;
}
</style>
